import {ref, defineExpose, h, handleError} from 'vue'
import {componentMap} from "@/components/trendsComponents/componentMap";
import {defineComponent} from 'vue'
import {useRouter} from 'vue-router'

export default defineComponent({
    name: 'demo-component-tsx',
    setup(props, context) {
        const router = useRouter()
        const componentsList = ref([]) //所以组件列表
        const current = ref(0) //组件下标
        const nowComponentsRef = ref()  //当前组件
        const ininComopent = (list: []) => {
            console.log(list)
            current.value = 0 //重置索引
            componentsList.value = list
        }
        // 使用 expose 暴露组件内部的方法
        context.expose({ininComopent})
        const handlesuccess = (res) => {
            // 成功调转下个组件
            current.value++
            console.log(nowComponentsRef.value)
            if (current.value == componentsList.value.length) {
                router.go(-1)
            }
        }
        const renderdom = () => {
            return componentMap.get(componentsList.value[current.value])
        }
        // 子组件传递参数和回调
        const atrr = {
            'ref': nowComponentsRef,
            'pageData': {id: '123456'},
            'onSuccess': handlesuccess
        }
        return () => (
            <div>
                {h(renderdom(), atrr)}
            </div>
        )
    }
})